<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html">
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="email=no">
	<title>首页</title>
	<link rel="stylesheet" href="../css/reset.css">
	<link rel="stylesheet" href="../css/home.min.css">
	<link rel="stylesheet" type="text/css" href="../assets/iconFont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="../assets/swiper/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="../css/page.min.css">
	<script type="text/javascript" src="../assets/flexible/flexible_css.debug.js"></script>
	<script type="text/javascript" src="../assets/flexible/flexible.debug.js"></script>
	<style type="text/css">
		@font-face {
		  font-family: 'iconfont';
		  src: url('iconfont.eot');
		  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
		  url('iconfont.woff') format('woff'),
		  url('iconfont.ttf') format('truetype'),
		  url('iconfont.svg#iconfont') format('svg');
		}
	</style>
</head>
<body class="bod">	
	<div class="bg">
		<img src="" alt="">
	</div>
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide content">
				<div class="indexHome">
					<header class="header">
						<p>我的首页</p>
					</header>
					<div class="menu">
						<div>
							<div>
								<i class="iconfont">&#xe617;</i>
								<p>我的音乐</p>
								<span class="mymis">7</span>
							</div>
						</div>
						<div >
							<div>
								<i class="iconfont">&#xe60e;</i>
								<p>我的最爱</p>
								<span class="loves">0</span>
							</div>
						</div>
						<div>
							<div>
								<i class="iconfont">&#xe644;</i>
								<p>文件夹</p>
								<span>0</span>
							</div>
						</div>
						<div>
							<div>
								<i class="iconfont">&#xe6f2;</i>
								<p>歌手</p>
								<span>0</span>
							</div>
						</div>
						<div>
							<div>
								<i class="iconfont">&#xe770;</i>
								<p>专辑</p>
								<span>0</span>
							</div>
						</div>
					</div>
				</div>
				<div class="listHome">
					<header class="header">
						<span class="back">
							<i class="iconfont ">&#xe6f7;</i>
						</span>
						<span>
							音乐列表
						</span>
						<span>
							<i class="iconfont">&#xe6b0;</i>
						</span>
					</header>
					<section class="listPage">
						<ul class="ull">
							
							<script type="text/html" id="template-item">
						    {{each list v i}}
						    	<li class="clearfix">
									<div>
										<i class="iconfont back">&#xe60e;</i>
									</div>
									<div>
										<p class="name"><span>{{v.name}}</span></p>
										<p><span><{{v.from}}></span><span>{{v.duration}}</span></p>
									</div>
								</li>
						    {{/each}}
						  </script>
						</ul>

					</section>
				</div>	
				<div class="myLove">
					<header class="header">
						<span class="back">
							<i class="iconfont ">&#xe6f7;</i>
						</span>
						<span>
							我的最爱
						</span>
						<span>
							<i class="iconfont">&#xe6b0;</i>
						</span>
					</header>
					<main class="love_main">
						<ul class="love_list">
							
						</ul>
					</main>
				</div>	
				<div class="fileHome">
					<header class="header">
						<span class="back">
							<i class="iconfont ">&#xe6f7;</i>
						</span>
						<span>
							文件夹
						</span>
						<span>
							<i class="iconfont"></i>
						</span>
					</header>
				</div>
				<div class="singerHome">
					<header class="header">
						<span class="back">
							<i class="iconfont ">&#xe6f7;</i>
						</span>
						<span>
							歌手
						</span>
						<span>
							<i class="iconfont"></i>
						</span>
					</header>
				</div>
				<div class="specialHome">
					<header class="header">
						<span class="back">
							<i class="iconfont ">&#xe6f7;</i>
						</span>
						<span>
							专辑
						</span>
						<span>
							<i class="iconfont"></i>
						</span>
					</header>
				</div>
				<footer class="footer">
					<div class="logo">
						<i class="iconfont">&#xe63c;</i>
					</div>
					<div class="timer">
						<p>
							<span class="current">00:00</span> - <span class="duration">00:00</span>
						</p>
					</div>
					<div class="control">
						<span class=" play">
							<i class="iconfont" >&#xe6c8;</i>
							<i class="iconfont" style="display: none;">&#xe6b8;</i>
						</span>
						<i class="iconfont next">&#xe64d;</i>
					</div>
					<div class="lists">
						<i class="iconfont">&#xe625;</i>
					</div>
				</footer>
			</div>
			<div class="swiper-slide menus">
				<h3>全能音乐播放器</h3>
				<ul>
					<li>
						<figure>
							<img src="../images/scan.png">
						</figure>
						<p>扫描歌曲</p>
					</li>
					<li class="loops">
						<figure class="loopList">
							<img src="../images/loop.png">
							<img src="../images/loopone.png">
							<img src="../images/orderloop.png">
							<img src="../images/randomloop.png">
						</figure>
						<p>列表循环</p>
					</li>
					<li class="changeSkin">
						<figure>
							<img src="../images/skin.png">
						</figure>
						<p>换肤</p>
					</li>
					<li>
						<figure>
							<img src="../images/timer.png">
						</figure>
						<p>睡眠</p>
					</li>
					<li>
						<figure>
							<img src="../images/set.png">
						</figure>
						<p>设置</p>
					</li>
					<li class="out">
						<figure>
							<img src="../images/out.png">
						</figure>
						<p>退出</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
	
	<div class="skins">
		<header class="skin_header">
			<p>选择皮肤</p>
		</header>
		<ul>
			<li>
				<img src="../images/loading.png">
				<img src="../images/checked.png" class="checked">
			</li>
			<li>
				<img src="../images/bg1.png">
				<img src="../images/checked.png" class="checked">
			</li>
			<li>
				<img src="../images/bg2.png">
				<img src="../images/checked.png" class="checked">
			</li>
			<li>
				<img src="../images/bg3.png">
				<img src="../images/checked.png" class="checked">
			</li>
		</ul>
	</div>




	<div class="minute">
		<header class="minute_header">
			<span>
				<i class="iconfont backA">&#xe6f7;</i>
			</span>
			<p>正在播放</p>
			<span>
				<i class="iconfont"></i>
			</span>
		</header>
		<section>
			<p>双节棍</p>
		</section>
		<div>
			<i class="iconfont ">&#xe616;</i>
			<span></span>
			<i class="iconfont">&#xe618;</i>
		</div>
		<main>
			<span>
				<i class="iconfont">&#xe61b;</i>
			</span>
			<a>没有歌词！点击搜索</a>
		</main>
		<footer class="minute_footer">
			<div class="plan"></div>
			<div class="down">
				<span>
					<i class="iconfont love">&#xe60e;</i>
				</span>
				<span>
					<i class="iconfont prev">&#xe603;</i>
				</span>
				<span class="play">
					<i class="iconfont ">&#xe600;</i>
					<i class="iconfont" style="display: none;">&#xe643;</i>
				</span>
				<span>
					<i class="iconfont next" >&#xe501;</i>
				</span>
				<span>
					<i class="iconfont">&#xe601;</i>
				</span>
			</div>
		</footer>
	</div>
	<audio id="au" src="" index=""></audio>
	<script src="../assets/jquery/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../js/template-web.js"></script>
	<script type="text/javascript" src="../assets/swiper/js/swiper.min.js"></script>
	<script src="../js/home.js"></script>
	<script type="text/javascript" src="../js/page.js"></script>
</body>
</html>
